import getComponentRootDom from './getComponentRootDom'
import Icon from '@/components/Icon'
import styles from './showMessage.module.less'

/**
 * 弹出消息api
 * @param {String} content 消息内容
 * @param {String} type 消息类型 error info success warn
 * @param {Number} duration 多久后消失
 * @param {HTMLElement} container 容器，消息会显示到容器的正中；如果不传，则显示到页面正中
 */
export default function (options = {}) {
  const content = options.content || ''
  const type = options.type || 'info'
  const duration = options.duration || 2000
  const container = options.container || document.body

  // 1.创建消息元素
  const div = document.createElement('div')
  const iconDom = getComponentRootDom(Icon, { type })
  div.innerHTML = `<span class="${styles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`

  // 2.设置样式
  const typeClassName = styles[`message-${type}`]
  div.className = `${styles.message} ${typeClassName}`

  // 3.将div加入到容器中
  // 检查容器的position是否开启，body不能设置position
  if (options.container) {
    if (getComputedStyle(container).position === 'static') {
      container.style.position = 'relative'
    }
  }
  container.appendChild(div)

  // 4.浏览器强行渲染
  div.clientHeight // 导致重排reflow

  // 5.回到正常位置
  div.style.opacity = 1
  div.style.transform = 'translate(-50%, -50%)'

  // 6.duration时间到了消失
  setTimeout(() => {
    div.style.opacity = 0
    div.style.transform = 'translate(-50%, -50%) translateY(-25px)'

    div.addEventListener(
      'transitionend',
      function () {
        div.remove()
        // 7.运行回调函数
        options.callback && options.callback()
      },
      { once: true }
    )
  }, duration)
}
